<template>
  <div style="padding-left: 70px" v-if="col !== null && row !== null">
    <div class="seats" v-for="(seatItem, seatIndex) in seats" :key="seatIndex">
      <span class="line-num">{{seatIndex+1}}</span>
      <seat

                 v-for="(columnsItem, columnsIndex) in seatItem.columns"
                 :X="columnsIndex"
                 :Y="seatIndex"
                 :key="`${columnsIndex}-${new Date}`"
                 :status.sync="columnsItem.status"
                 :disabled="columnsItem.disabled"
                 @click="clickSeat"
      ></seat>
    </div>
    <!--<el-button @click="getSeats">点击查看seats</el-button>-->
  </div>
</template>

<script>
import seat from './seat-item'
export default{
  components: {
    seat
  },
  props: {
    col: {},
    row: {},
    data: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      seats: [],
      data_info: {}
    }
  },
  mounted() {
    this.CreateSeats()
  },
  watch: {
    data: {
      immediate: true,
      handler(seats) {
        let col
        if (seats && seats.length > 0 && seats[0].columns) {
          col = seats[0].columns.length
        }
        this.seats = seats
        this.data_info = {
          row: seats.length,
          col: col || 0,
          seats: seats
        }
      }
    },
    col(value, oldValue) {
      if (value !== oldValue) {
        this.CreateSeats()
      }
    },
    row(value, oldValue) {
      if (value !== oldValue) {
        this.CreateSeats()
      }
    },
    seats(seats) {
      this.$emit('changeSeats', seats)
    }
  },
  methods: {
    CreateSeats() {
      if (this.row === this.data_info.row && this.col === this.data_info.col) {
        this.seats = this.data_info.seats
        return
      }
      const seats = []
      for (let i = 0; i < this.row; i += 1) {
        seats[i] = {
          columns: this.generateCol(i)
        }
      }
      this.seats = seats
      this.$emit('getSeat', this.seats)
    },
    generateCol(row) {
      const array = []
      for (let i = 0; i < this.col; i += 1) {
        array[i] = {
          x: i,
          y: row,
          status: 'empty',
          disabled: false
        }
      }
      return array
    },
    clickSeat(seat) {
      this.setSeat(seat)
      this.$emit('clickSeat', seat, this.seats)
    },
    getSeats() {
      console.log('getSeats', this.seats)
    },
    setSeatStatus(seat, status) {
      // 切换状态
      // ['disabled' => 禁用, 'empty' => 空, 'booked' => 已经被定, 'selected' => 选中,]
      seat.status = status
      this.setSeat(seat)
    },
    toggleSeatDisable(seat) {
      // 切换 是否禁用状态

      seat.disabled = !seat.disabled
      this.setSeat(seat)
    },
    setSeat(seat) {
      const seat_row = this.seats[seat.y]

      seat_row.columns[seat.x] = seat

      this.$set(this.seats, seat.y, seat_row)
    }
  }
}
</script>

<style scoped>
  .line-num{
    display: inline-block;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 0;
    left: -70px;
  }
  .seats{
    height: 30px;
    margin-bottom: 10px;
    position: relative;
  }

</style>
